import React from 'react';
import {Card,Table} from 'antd';
import axios from './../../axios';
import Utils from './../../utils/utils'
import BaseForm from './../../components/BaseForm'

export default class User extends React.Component{
    constructor() {
        super();
        this.state = {

        }
    }

    params = {
      page: 1
    };

    componentDidMount() {
        this.request();
    };

    request = () => {
        let that = this;
        axios.Axios({
            url: "order/list",
            method: 'get',
            params: this.params
        }).then(res => {
            this.setState({
                dataSource: res.list,
                loading: false,
                pagination: Utils.pagination(res, (current) => {
                    that.params.page = current;
                    this.request()
                })
            })
        })
    };

    handleFilter = (params) => {
        this.params = params;
        this.request();
    };

    formList = [
        {
            type:'INPUT',
            label:'用户名',
            filed: 'user_name',
            placeholder:'请输入用户名',
            width:100
        },
        {
            type:'INPUT',
            label:'手机号',
            filed: 'user_moblie',
            placeholder:'请输入用户名',
            width:100
        },
        {
            type:'DATE',
            label: '请选择入职日期',
            filed:'user_date',
            placeholder:'请输入手机号',
            width:100
        }
    ];

    render() {
        const columns = [
            {
                title: '订单编号',
                key: 'order_sn',
                dataIndex: 'order_sn'
            },
            {
                title: '车辆编号',
                key: 'bike_sn',
                dataIndex: 'bike_sn'
            },
            {
                title: '用户名',
                key: 'user_name',
                dataIndex: 'user_name'
            },
            {
                title: '手机号',
                key: 'moblie',
                dataIndex: 'moblie'
            },
            {
                title: '里程',
                key: 'distance',
                dataIndex: 'distance'
            },
            {
                title: '行驶时长',
                key: 'total_time',
                dataIndex: 'total_time'
            },
            {
                title: '状态',
                key: 'status',
                dataIndex: 'status'
            },
            {
                title: "开始时间",
                key: 'start_time',
                dataIndex: 'start_time'
            },
            {
                title: "结束时间",
                key: 'end_time',
                dataIndex: 'end_time'
            },
            {
                title: "订单金额",
                key: 'total_fee',
                dataIndex: 'total_fee'
            },
            {
                title: "实付金额",
                key: 'user_pay',
                dataIndex: 'user_pay'
            },
        ];
        const selectedRowKeys = this.state.selectedRowKeys;
        const rowSelection = {
            type: 'radio',
            selectedRowKeys
        };
        return (
            <div className="wrap">
                <Card>
                    <BaseForm formList={this.formList} filterSubmit={this.handleFilter}/>
                </Card>
                <div className="content-wrap">
                    <Table
                        columns={columns}
                        dataSource={this.state.dataSource}
                        pagination={this.state.pagination}
                        rowKey={record => record.id}
                        loading={this.state.loading}
                        rowSelection={rowSelection}
                        onRow={(record,index) => {
                            return {
                                onClick: () => {
                                    this.onRowClick(record,index);
                                }
                            }
                        }}
                    />
                </div>
            </div>
        )
    }
}